<template>
  <view class="Brief">
      <view class="moduleStyles">热门简章</view>
      <view class="block">
        <view class="items" v-for="item in items" :key="item.id"  @tap='toSchoolPage'>
          <image :src="item.imgUrls" class="bl-image"></image>
          <view class="title">{{ item.title }}</view>
          <view class="titles">{{ item.title }}</view>
        </view>
      </view>
      <navigator url="/pages/demo2/index">
        <view class="more"> 查看更多 </view>
      </navigator>
      
    </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
    data(){
        return{
            items: [
        {
          id: 1,
          imgUrls:
            "	https://img.k12zx.com/picture/5e8aee6a82d5d7474.jpg",
          title: "北京爱迪国际学校幼儿园课程",
        },
        {
          id: 2,
          imgUrls:
            "https://img.k12zx.com/picture/5e8aee743d4de6512.jpg",
          title: "北京爱迪国际学校小学课程",
        },
        {
          id: 3,
          imgUrls:
            "https://marketplace.canva.cn/CGEHc/MAB3uLCGEHc/2/tl/canva-%E9%BD%BF%E8%BD%AE%E5%9B%BE%E6%A0%87-gear-icon-MAB3uLCGEHc.png",
          title: "测试文字用于展示和点击",
        },
        {
          id: 4,
          imgUrls:
            "https://marketplace.canva.cn/CGEHc/MAB3uLCGEHc/2/tl/canva-%E9%BD%BF%E8%BD%AE%E5%9B%BE%E6%A0%87-gear-icon-MAB3uLCGEHc.png",
          title: "测试文字用于展示和点击",
        },
      ],
        }
    },
    methods:{
      toSchoolPage:function(){
        Taro.navigateTo({
          url:'/pages/schoolDetails/index'
        })
      }
    }
}
</script>
<style>
.Brief {
    height: 1200px;
    background-color: white;
    margin-top: 20px;
    text-align: center;
}

.moduleStyles {
    width: 20%;
    height: 8%;
    margin: 0 auto;
    border-bottom: 7px solid #2A5F96;
    line-height: 80px;
}

.block {
    width: 94%;
    height: 78%;
    display: flex;
    flex-wrap: wrap;
    margin: 40px auto;
    /* background-color: blue; */
}

.block .items {
    width: 45%;
    height: 50%;
    margin-left: 4%;
    /* text-align: left; */
    /* background-color: greenyellow; */

}

.items:nth-child(2n+1) {
    margin-left: 3%;
}

.items image {
    width: 100%;
    height: 75%;
}

.items .title {
  overflow: hidden;
  white-space:nowrap;
    padding-top: 10px;
    font-size: 29px;
}

.items .titles {
  overflow: hidden;
  white-space:nowrap;
    margin-right: auto;
    padding-top: 5px;
    font-size: 25px;
    color: #999;
}

.more {
    width: 35%;
    height:20px 70px;
    margin: auto;
    background-color: #0B6dB6;
    text-align: center;
    line-height: 70px;
    color: white;
}
</style>